{% block sw_select_selection_list %}
<ul class="sw-select-selection-list">
    {% block sw_select_selection_list_item %}
    <template v-if="!hideLabels">
        <li
            v-for="(selection, index) in selections"
            :key="selection[valueProperty]"
            class="sw-select-selection-list__item-holder"
            :class="'sw-select-selection-list__item-holder--' + index"
            :data-id="selection[valueProperty]"
        >

            {% block sw_select_selection_list_item_inner %}
            <slot
                name="selected-option"
                v-bind="{ selection, defaultLabel: selection[labelProperty], disabled }"
            >
                <sw-label
                    :dismissable="!isSelectionDisabled(selection)"
                    :size="size"
                    @dismiss="onClickDismiss(selection)"
                >
                    {% block sw_select_selection_list_item_text %}
                    <span class="sw-select-selection-list__item">
                        <slot
                            name="label-property"
                            v-bind="{ item: selection, index, labelProperty, valueProperty }"
                        >
                            {{ selection[labelProperty] }}
                        </slot>
                    </span>
                {% endblock %}
                </sw-label>
            </slot>
        {% endblock %}
        </li>
    </template>
    {% endblock %}

    {% block sw_select_selection_list_load_more %}
    <li
        v-if="invisibleCount > 0 && !hideLabels"
        class="sw-select-selection-list__load-more"
    >
        <slot
            name="invisible-count"
            v-bind="{ invisibleCount, onClickInvisibleCount }"
        >
            {% block sw_select_selection_list_load_more_item_button %}
            <mt-button
                class="sw-select-selection-list__load-more-button"
                variant="secondary"
                @click.stop="onClickInvisibleCount"
            >
                +{{ invisibleCount }}
            </mt-button>
            {% endblock %}
        </slot>
    </li>
    {% endblock %}

    {% block sw_select_selection_list_input %}
    <li class="sw-select-selection-list__input-wrapper">
        <slot
            name="input"
            v-bind="{ placeholder, searchTerm, onSearchTermChange, onKeyDownDelete }"
        >
            <!-- eslint-disable-next-line vuejs-accessibility/role-has-required-aria-props -->
            <input
                ref="swSelectInput"
                class="sw-select-selection-list__input"
                type="text"
                role="combobox"
                :disabled="disabled"
                :readonly="!enableSearch"
                :placeholder="showPlaceholder"
                :value="searchTerm"
                :aria-label="inputLabel"
                @input="onSearchTermChange"
                @keydown.delete="onKeyDownDelete"
                @keydown.enter="onKeyDownEnter"
            >
        </slot>
    </li>
    {% endblock %}
</ul>
{% endblock %}
